<template>
  <div>
    <z-space vertical>
      <h3>横向</h3>
      <z-space>
        <div>Space</div>
        <el-button type="primary">Button</el-button>
      </z-space>
      <codemirror class="z-code" v-model="xmlMan1.code" :options="xmlMan1.cmOptions" />

      <h3>竖向</h3>
      <z-space vertical>
        <div>Space</div>
        <el-button type="primary">Button</el-button>
      </z-space>
      <codemirror class="z-code" v-model="xmlMan2.code" :options="xmlMan2.cmOptions" />
      <h3>修改间距为20px</h3>
      <z-space column-gap="20px">
        <div>Space</div>
        <el-button type="primary">Button</el-button>
      </z-space>
      <codemirror class="z-code" v-model="xmlMan3.code" :options="xmlMan3.cmOptions" />
    </z-space>
  </div>
</template>

<script>
import {quickHtmlCode} from "@example/components/CodeMirror";

export default {
  components: {},
  data() {
    return {
    }
  },
  setup() {
    let xmlMan1 = quickHtmlCode(
        `<template>
  <z-space>
    <div>Space</div>
    <el-button type="primary">Button</el-button>
  </z-space>
</template>`);

    let xmlMan2 = quickHtmlCode(
        `<template>
  <z-space vertical>
    <div>Space</div>
    <el-button type="primary">Button</el-button>
  </z-space>
</template>`);

    let xmlMan3 = quickHtmlCode(
        `<template>
  <z-space column-gap="20px">
    <div>Space</div>
    <el-button type="primary">Button</el-button>
  </z-space>
</template>`);

    return {
      xmlMan1,
      xmlMan2,
      xmlMan3,
    }
  }
}
</script>
